<!-- 商家、服务列表 -->
<template>
	<loading-page v-if="showSkeleton" />
	<!-- tabs -->
	<view class="tab">
		<v-tabs v-model="data.tabIndex" :tabs="data.tabList" color="#999" fontSize="32rpx" height="100rpx" :lineScale="0.3" lineHeight="4rpx" lineColor="#E1835B" paddingItem="0 30rpx" activeColor="#000" :bold="true" :lineAnimation="data.lineAnimation" @change="changeTab"></v-tabs>
	</view>
	<!-- list -->
	<view class="list">
		<template v-for="(item,index) in dataList" :key="index">
			<list-merchant-item :item="item" :index="index" />
		</template>
	</view>
	<!-- 空数据 -->
	<empty v-if="!dataList.length&&!showSkeleton" />
	<!-- 更多数据 -->
	<uni-load-more :status="loadMore.status" v-if="loadMore.show" :contentText="loadMore.txt"></uni-load-more>
</template>
<script setup>
	import { ref, reactive, watch, defineComponent, computed } from 'vue';
	import { onLoad, onReady, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
	import listMerchantItem from '@/pages/find/components/list-merchant-item.vue';
	import useGetList from '@/common/hooks/useGetList.js';
	defineComponent({
		listMerchantItem
	});
	onLoad((options) => {
		init();
	});
	onReady(() => {
		data.lineAnimation = true;
	});
	onReachBottom(() => {
		reachBottom();
	});
	onPullDownRefresh(() => {
		pullDownRefresh();
	});
	const { getDataList, dataList, page, loadMore, showSkeleton, reachBottom, pullDownRefresh } = useGetList();
	const listRef = ref(null);
	const data = reactive({
		tabIndex: 0,
		tabList: ['行业大牛'],
		lineAnimation: false
	});
	// 初始化数据
	function init() {
		getDataList({
			url: '/crm/user/viewMerchant',
			showLoading: false
		});
	}
	// tab切换
	function changeTab(e) {
		data.tabIndex = e;
	}
</script>
<style>
	page {
		background-color: #F3F5F7;
	}
</style>
<style scoped lang="scss">
	.tab {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 99999;
	}
	.list {
		padding: 30rpx 28rpx 0;
	}
</style>
